<!--电费缴费历史-->
<template>
  <div>
    <div style="margin:10px 0;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
    </div >

    <!--表格主体 start-->
    <el-table :data="tableData"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
              @selection-change="handleSelectionChange"
              :header-cell-style="tableHeaderColor">
      <el-table-column prop="user.username" label="缴费人员学号" sortable width="130"></el-table-column>
      <el-table-column prop="user.nickname" label="缴费人员姓名" sortable width="130"></el-table-column>
      <el-table-column prop="showTime" label="缴费时间" sortable width="130"></el-table-column>
      <el-table-column prop="campus" label="校区" sortable width="130"></el-table-column>
      <el-table-column prop="area" label="区域" sortable width="130"></el-table-column>
      <el-table-column prop="building" label="楼栋号" sortable width="130"></el-table-column>
      <el-table-column prop="roomId" label="宿舍号" sortable width="130"></el-table-column>
      <el-table-column prop="money" label="缴费金额" sortable width="386"></el-table-column>

    </el-table>
    <!--表格主体 end-->

    <!--分页 end-->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[5,8, 10, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
    <!--分页 end-->

  </div>
</template>

<script>
export default {
  name: "HistoryOrder",
  data(){
    return{
      //页签
      plate:"电费",
      func:"历史账单",
      tableData: [],
      count:0,
      pageNum:1,
      pageSize:5,
      state:"全部", // 全部, 已缴费, 未缴费
      multipleSelection:[],
      dialogFormVisible:false,
      form:{},
      title:"",
    }
  },
  created() {
    this.form.username=JSON.parse(localStorage.getItem("user")).username;
    this.pageNum = 1;
    this.pageSize = 5;
    this.init()
    this.$emit("generateTab",this.plate,this.func)
    //this.clearForm();
  },
  methods:{
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #e0f6fe;color: #303133;font-weight: 600;font-size:12px;'
      }
    },
    init(){
      this.request({
        url:"/user/page",
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          search:this.form.username
        },
      }).then(
          res => {
            console.log(res)
            let r=res.records[0];
            this.$set(this.form,"campus",r.campus);
            this.$set(this.form,"area",r.area);
            this.$set(this.form,"building",r.building);
            this.$set(this.form,"roomId",r.dormitory);
            this.$set(this.form,"uid",r.id);
            this.load()
          }
      )
    },
    load() {
      //axios方式http://localhost:9090前缀写在了request.js文件中，可省略
      this.request({
        url:"/epayment/history",
        method:"GET",
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          uid:this.form.uid,
          state:"已缴费"
        },
      }).then(
          res => {
            console.log(res.data.records);
            this.tableData = res.data.records.map(a=>{
              a.showTime = a.createTime.slice(0, 10);
              if(a.user) a.user.status = (a.status === 1 ? '已缴费' : '未缴费')
              else a.user = {status:'未缴费'}
              return a
            })
            this.count = res.data.total;
          }
      )
      this.$forceUpdate();
    },
    //分页
    handleSizeChange(pageSize){
      console.log("pageSize:"+pageSize);
      this.pageSize=pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){
      console.log("pageNum:"+pageNum);
      this.pageNum=pageNum;
      this.load();
    },
    clearAndLoad(){
      this.pageNum=1;
      this.pageSize=5;
      this.load();
    },
    handleSelectionChange(val){
      console.log(val)
      this.multipleSelection = val;
    },
  }
}
</script>

<style scoped>
.el-menu {
  height: 100%;
  border-right-width: 0;
}
.pagination,.search_box{
  padding: 10px 0px;
}

.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>